<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/vue.js"></script>
    <style>
    </style>
</head>

<body>
    <div id="root">
        <h1>学生信息</h1>

        <button @click.once="student.age++">年龄+1</button><br>
        <button @click="addSex">添加性别 男</button><br>
        <button @click="addFri">在列表首页添加一个对象</button><br>
        <button @click="changeFir">修改第一个对象的名字是：周露</button><br>
        <button @click="addHobby">添加一个爱好</button><br>
        <button @click="changeHobby">修改第一个爱好为：开车</button><br>
        <button @click="removeSmoke">过滤抽烟</button><br>

        <h3>姓名：{{student.name}}</h3>
        <h3 v-if="student.sex">性别：{{student.sex}}</h3>
        <h3>年龄：{{student.age}}</h3>
        <h1>爱好</h1>
        <ul>
            <li v-for="(item, index) in student.hobby" :key="index">
                {{item}}
            </li>
        </ul>
        <h1>对象们</h1>
        <ul>
            <li v-for="(item, index) in student.friends" :key="index">
                {{item.name}}--{{item.age}}
            </li>
        </ul>
    </div>
    <script>
        Vue.config.productionTip = false //取消生产提示

        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    student: {
                        name: '李文泰',
                        age: 18,
                        hobby: ['学习', '学习', '还是他妈的学习', '抽烟', '音乐', '抽烟'],
                        friends: [{
                                name: '迪丽热巴',
                                age: 19
                            },
                            {
                                name: '江疏影',
                                age: 20
                            }
                        ]
                    }

                }
            },
            methods: {
                addSex() {
                    Vue.set(this.student, 'sex', '男')
                },
                addFri() {
                    this.student.friends.unshift({
                        name: '李婉茹',
                        age: 18
                    })
                },
                changeFir() {
                    this.student.friends[0].name = '周露'
                },
                addHobby() {
                    this.student.hobby.push('想女人')
                },
                changeHobby() {
                    this.student.hobby.splice(0, 1, '开车')
                },
                removeSmoke() {
                    this.student.hobby = this.student.hobby.filter((value) => {
                        return value.indexOf('抽烟') == -1
                    })
                }
            },
        })
    </script>
</body>

</html>